<template>
  <div class="device-amap">
    <div class="device-amap-bg"></div>
    <div class="device-amap-box">
      <div id="AMapContainer" class="amap-box"></div>
      <div class="right-top-box">
        <SvgIcon icon-class="apmap-bg-top" style="width: 189px; height: 51px" />
        <div class="right-top-label">服务器20.10</div>
      </div>
      <div class="right-box">
        <SvgIcon icon-class="amap-right-bg" style="width: 380px; height: 661px" />
        <div class="right-box-container">
          <div class="device-info">
            <div class="device-info-label">
              <div class="device-title">设备信息</div>
              <div class="device-status">
                <span class="Badge"></span>
                在线
              </div>
            </div>
            <div class="device-info-line"></div>
          </div>
          <div class="pergormance"></div>
          <div class="algorithm"></div>
          <div class="btn-view">
            <div class="common-btn">
              <SvgIcon icon-class="lianji" style="width: 19.5px; height: 19.5px" />
              <div class="common-btn-label">解绑</div>
            </div>
            <div class="common-btn">
              <SvgIcon icon-class="grid" style="width: 19.5px; height: 19.5px" />
              <div class="common-btn-label">详情</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"
window._AMapSecurityConfig = {
  securityJsCode: "2c55a5dc8b4d1f10962e9497919074c8" // '「申请的安全密钥」',
}
export default {
  name: "deviceAmap",
  props: {},
  components: {},
  data() {
    return {
      map: null,
      //标记点的位置信息
      mapData: [
        {
          name: "服务器20.10",
          longitude: 116.471576,
          latitude: 39.96204,
          address: "192.168.20.110",
          deviceId: "重庆",
          time: "2024-02-22"
        },
        {
          name: "服务器20.10",
          longitude: 116.472269,
          latitude: 39.959533,
          address: "192.168.20.111",
          deviceId: "重庆",
          time: "2024-02-22"
        }
      ],
      clickMarker: null,
      deciceInfoList: [
        { label: "设备型号：", content: "Bsk-JS1000X" },
        { label: "设备类型：", content: "分析/储存设备" },
        { label: "摄像机个数：", content: "2" },
        { label: "当前所在楼层：", content: "3楼" }
      ]
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.initAMap()
  },
  watch: {},
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "dde5dce82d918a57d572c3c1ad489ff2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.Geocoder",
          "AMap.Marker",
          "AMap.CitySearch",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.InfoWindow"
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 获取到作为地图容器的DOM元素，创建地图实例
          this.map = new AMap.Map("AMapContainer", {
            //设置地图容器id
            resizeEnable: true,
            viewMode: "3D", // 使用3D视图
            zoomEnable: true, // 地图是否可缩放，默认值为true
            dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
            doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
            zoom: 16, //初始化地图级别
            showBuildingBlock: true, // 是否出现建筑模型
            mapStyle: "amap://styles/darkblue",
            center: [116.471569, 39.959523],
            pitch: 30 // 视角控制 地图俯仰角度，有效范围 0 度- 83 度
          })
          this.markPoints(AMap)
        })
        .catch((e) => {
          console.log(e)
        })
    },
    //遍历显示标记点
    markPoints(AMap) {
      this.mapData.forEach((item) => {
        let oldIcon = new AMap.Icon({
          image: require("@/assets/images/deviceManage/map-marker.png"),
          size: new AMap.Size(62, 58),
          imageSize: new AMap.Size(62, 58),
          imageOffset: new AMap.Pixel(0, 0)
        })
        // let newIcon = new AMap.Icon({
        //   image: require("@/assets/images/deviceManage/deviceAmap-bg.png"),
        //   size: new AMap.Size(62, 58),
        //   imageSize: new AMap.Size(62, 58),
        //   imageOffset: new AMap.Pixel(0, 0)
        // })
        // 创建一个 Marker 实例：
        const marker = new AMap.Marker({
          position: new AMap.LngLat(item.longitude + "", item.latitude + ""), // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
          icon: oldIcon //设置了没改变
          // offset: new AMap.Pixel(-20, -62) //设置偏移量
        })
        // 将创建的点标记添加到已有的地图实例：
        this.map.add(marker)

        //给标记点添加事件
        marker.on("click", (e) => {
          this.setInfoWindows(e, item, AMap)
        })
        marker.emit("click", { target: marker })
      })
    },
    //显示的弹出框组件
    setInfoWindows(e, item, AMap) {
      console.log(item)
      // 信息窗体的内容

      let content = [
        // e.pos[0],e.pos[1],
        `<div style="width: 313px;height: 198px;position:reactive">`,
        `<div style="color: #fff;font-size: 16px;font-weight: bold;margin-left:25px;margin-top: 10px;">${item.name}</div>`,
        `<div style="color: #fff;font-size: 14px;font-weight: 350;margin-left:25px;margin-top: 0px;">IP地址 : ${item.address}</div>`,
        `<div style="color: #fff;font-size: 14px;font-weight: 350;margin-left:25px;margin-top: 0px;">设备位置 : ${item.deviceId}</div>`,
        `<div style="color: #fff;font-size: 14px;font-weight: 350;margin-left:25px;margin-top: 0px;">安装时间 : ${item.time}</div>`,
        `<div style="position: absolute;left: 234.33px;top: 22.42px;color: #05FF37;display:flex;align-items:center">
          <div style="width: 6px;height: 6px;background: #05FF37;border-radius: 6px;margin-right: 6px"></div>在线</div>`,
        `</div>`
      ]
      // 创建 infoWindow 实例
      let infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(30, 0),
        content: content.join("<br>") //传入 dom 对象，或者 html 字符串
      })
      // 打开信息窗体
      let dd = this.map.getCenter()
      // dd.pos = [e.pos[0], e.pos[1]]
      dd.lat = item.latitude
      dd.lng = item.longitude
      console.log(dd)
      infoWindow.open(this.map, dd)
    }
  },
  destroyed() {
    this.map.destroy()
    this.map = null
  }
}
</script>

<style scoped lang="scss">
.device-amap {
  width: 100%;
  height: 100%;
  position: relative;
  .device-amap-bg {
    width: calc(100% - 20px);
    height: 100%;
    background-image: url("@/assets/images/deviceManage/deviceAmap-bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .device-amap-box {
    // margin-top: 30px;
    padding: 27px 10px;
    width: calc(100% - 20px);
    height: 100%;

    position: absolute;
    top: 0;
    z-index: 1;
    .amap-box {
      width: calc(100% - 20px);
      height: calc(100% - 35px);
      border-radius: 40px;
    }
    .right-top-box {
      width: 189px;
      height: 51px;
      position: absolute;
      top: 65px;
      right: 221px;
      z-index: 2;
      .right-top-label {
        width: 189px;
        height: 51px;
        line-height: 51px;
        text-align: center;
        position: absolute;
        top: 0px;
        left: 0;
        font-family: "SourceHanSans";
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 0px;

        /* 按钮文字 */
        color: #01c2ff;
      }
    }
    .right-box {
      width: 380px;
      height: 661px;
      position: absolute;
      top: 116px;
      right: 33px;
      z-index: 2;
      .right-box-container {
        width: 380px;
        height: 661px;
        position: absolute;
        top: 0px;
        left: 0;

        .device-info {
          margin: 40px auto 0;
          width: 320px;
          height: 190px;
          padding: 0 15px;
          border-radius: 3px;
          opacity: 0.75;
          background: #0f2b3f;
          box-sizing: border-box;
          .device-info-label {
            width: 320px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .device-title {
              width: 60%;
              text-align: left;
              font-size: 14px;
              font-weight: normal;
              color: #01c2ff;
            }
            .device-status {
              flex: 1;
              margin-left: 0;
              font-size: 14px;
              font-weight: normal;
              line-height: 22px;
              letter-spacing: 0px;
              color: #05ff37;
            }
          }
          .device-info-line {
            width: 218px;
            border: 1px solid #01c2ff;
            margin-top: 5px;
          }
        }

        .pergormance {
          margin: 10px auto 0;
          width: 320px;
          height: 180px;
          border-radius: 3px;
          opacity: 0.75;
          background: #0f2b3f;
        }
        .algorithm {
          margin: 10px auto 0;
          width: 320px;
          height: 136px;
          border-radius: 3px;
          opacity: 0.75;
          background: #0f2b3f;
        }
        .btn-view {
          margin-bottom: 0px;
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          .common-btn {
            margin-left: 26px;
            width: 100px;
            height: 40px;
            border-radius: 60px;
            opacity: 1;
            background: rgba(10, 26, 52, 0.6);
            border: 1px solid rgba(89, 175, 249, 0.7049);
            box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
            display: flex;
            align-items: center;
            justify-content: center;
            .common-btn-label {
              margin-left: 10px;
              font-family: "SourceHanSans";
              font-size: 16px;
              font-weight: normal;
              line-height: 20px;
              letter-spacing: 0px;
              color: #01c2ff;
            }
          }
        }
      }
    }
  }
}
.Badge {
  width: 6px;
  height: 6px;
  background: #05ff37;
  border-radius: 100%;
  display: inline-block;
  margin-bottom: 1px;
  margin-right: 5px;
}
::v-deep {
  .amap-info-content {
    background: #0b2032;
    backdrop-filter: blur(10px);
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
      0px 2px 4px -1px rgba(0, 0, 0, 0.12);
    padding: 0px;
  }
  .bottom-center .amap-info-sharp {
    border-top: 8px solid #0b2032;
    bottom: 1px;
  }
}
</style>
